<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        title="菜单列表"
        ref="proTableRef"
        row-key="id"
        :show-pagination="pageable"
        :init-param="defaultParam"
        :columns="columns"
        :expand-row-keys="expandKeys"
        highlight-current-row
        :request-api="loadData">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <ElButton v-auth="'MenuCreate'" type="primary" :icon="CirclePlus" @click="onAddClicked">新增</ElButton>
          <ElButton type="primary" :icon="Expand" @click="onExpandClicked">展开全部</ElButton>
          <ElButton type="primary" :icon="Fold" @click="onFoldClicked">收起全部</ElButton>
        </template>
        <!-- 菜单图标 -->
        <template #icon="scope">
          <ElIcon v-if="scope.row.data.icon" :size="18">
            <Component :is="scope.row.data.icon"></Component>
          </ElIcon>
        </template>

        <!-- 表格操作 -->
        <template #operation="scope">
          <ElButton type="primary" link :icon="View" @click="onViewClicked(scope.row)">查看</ElButton>
          <ElButton v-if="scope.row.data.type !== '4'" type="primary" link :icon="Plus" @click="onAddClicked(scope.row)"
            >新增</ElButton
          >
          <ElButton type="primary" link :icon="EditPen" @click="onEditClicked(scope.row)">编辑</ElButton>
          <ElButton type="primary" link :icon="Delete" @click="onDeleteClicked(scope.row)">删除</ElButton>
        </template>
      </ProTable>
      <MenuForm ref="formRef" @success="refresh" />
    </div>
  </div>
</template>

<script setup lang="ts" name="ZLMenu">
import { ref, reactive, unref, computed } from 'vue'
import ProTable from '@/components/ProTable/index.vue'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { Delete, CirclePlus, EditPen, Plus, View, Fold, Expand } from '@element-plus/icons-vue'
import MenuForm from './menu-form.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Menu } from '@api/uc/menu/interface'
import { removeMenu, treeMenus } from '@api/uc/menu'
import { menuTypes, cacheState } from './dict'
import { FormType } from '@/enums'
// import { useAuthButtons } from '@/hooks/useAuthButtons'
const proTableRef = ref<ProTableInstance>()
const defaultParam = reactive({ appcode: '' })
const expandSet = ref(new Set())
// 打开 drawer(新增、查看、编辑)
const formRef = ref<InstanceType<typeof MenuForm> | null>(null)
// 可分页状态
const pageable = ref(false)
// 表格配置项
const columns: ColumnProps[] = [
  { prop: 'name', label: '菜单名称', align: 'left', width: 300, search: { el: 'input', key: 'title' } },
  { prop: 'data.path', label: '路由地址', align: 'left', search: { el: 'input', key: 'path' } },
  { prop: 'data.icon', label: '图标', width: 80 },
  { prop: 'weight', label: '排序', width: 80 },
  {
    prop: 'data.type',
    label: '菜单类型',
    enum: menuTypes,
    tag: true,
    search: { el: 'select', key: 'type', order: 2 },
    width: 100
  },
  { prop: 'data.component', label: '组件名', search: { el: 'input', key: 'component' }, isShow: false },
  { prop: 'data.isKeepAlive', label: '缓存', tag: true, enum: cacheState, width: 100 },
  { prop: 'data.permission', label: '权限标识', width: 150 },
  { prop: 'operation', label: '操作', fixed: 'right', width: 330 }
]

// 展开行数组
const expandKeys = computed(() => {
  return Array.from(expandSet.value)
})

// 模块变更
// const changeModule = (id: string) => {
//   proTableRef.value!.pageable.current = 1
//   defaultParam.appcode = id
// }
// 加载数据
function loadData(query: Menu.Query) {
  pageable.value = !!(query.path || query.component || query.title || query.type)
  query.pageable = unref(pageable)
  return treeMenus(query)
}

// 刷新列表
function refresh(keys: string[]) {
  proTableRef.value?.getTableList()
  keys.forEach(item => expandSet.value.add(item))
}

// 添加菜单
const onAddClicked = (row?: any) => {
  const data = proTableRef.value?.tableData
  if (data) {
    formRef.value?.open(FormType.ADD, { appcode: defaultParam.appcode, parentId: row.id })
    return
  }
  ElMessage({
    message: '应用列表为空，请先添加应用后再添加菜单。',
    type: 'warning'
  })
}

// 展开
function onExpandClicked() {
  const data = proTableRef.value?.tableData
  expandSet.value = new Set()
  if (data) {
    toggleExpand(data)
  }
}

// 展开方法递归
function toggleExpand(data: any[]) {
  data.forEach(item => {
    expandSet.value.add(item.id)
    if (item.children) {
      toggleExpand(item.children)
    }
  })
}

// 收起
function onFoldClicked() {
  expandSet.value = new Set()
}

// 查看菜单
const onViewClicked = (row: any) => {
  formRef.value?.open(FormType.VIEW, { appcode: defaultParam.appcode, id: row.id })
}

// 编辑菜单
const onEditClicked = (row: any) => {
  formRef.value?.open(FormType.EDIT, { appcode: defaultParam.appcode, id: row.id })
}

// 删除菜单
const onDeleteClicked = (row: any) => {
  ElMessageBox.confirm('您确定要删除该菜单吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      removeMenu(row.id).then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        proTableRef.value?.getTableList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'warning',
        message: '删除取消!'
      })
    })
}
</script>
